<template>
	<!-- 添加屏蔽企业 -->
	<view class="box">
		<view class="search-box">
			<u-search :showAction="true" actionText="取消" :placeholder="'请输入想要屏蔽的公司'" v-model.trim="keyWord"
				@custom="quxiao" @clear="clearsearch" @change="changeSearch">
			</u-search>
			<!-- @change="changeSearch" -->
		</view>
		<view class="content-box">
			<view class="content">
				<view class="check">
					<label class="checklabelbox" v-for="(item,index) in checkDataList" :key="index">
						<view class="checklabel">
							<checkbox :value="`${item.CorpId}`" :disabled="item.Disable" :checked="item.checked"
								@click="checkboxChange(item,index)" />
							<view class="textbox">
								<view class="name">
									<!-- <view :style="setColor(items)" v-if="item.CorpName"
										v-for="(items,indexs) in item.CorpName.split('')" :key="indexs">{{items}}
									</view> -->
									<view v-html="$util.hightLight(item.CorpName, keyWord,'#2878FF','15px') ">{{item.CorpName}}</view>
								</view>
								<view v-if="item.ShortName">简称：{{item.ShortName}}</view>
							</view>
						</view>
					</label>
				</view>
				<view v-if="checkDataList.length==0" class="Corp">支持公司全称、简称</view>
			</view>
		</view>
		<view class="fiexd" v-if="checkDataList.length>0">
			<view class="fiexd-cont">
				<view>

					<view  class="quanxuan">
						<view class="tubiao" :class="checkBoxmd?'tubiao':'tubiao1'" @click="checkBoxMD">
							<u-icon name="checkbox-mark" color="rgb(0, 122, 255)" size="22" v-show="!checkBoxmd">
							</u-icon>
						</view>
						{{checkBoxmd?'全选':'取消全选'}}
					</view>
				
				</view>
				<view class="btnbox2" @click="piingbi">
					<view class="btntext">屏蔽所选企业</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkDataList: [], //显示查询企业数据
				checkTag: false,
				statusBarH: '', //手机状态栏高度
				windowHeight: '', //手机屏幕高度
				checkedAll: [],
				keyWord: "",
				pageindex: 1,
				pagesize: 100,
				status: "loadmore",
				// valueall: [{
				// 	name: "全选",
				// 	chencked: false,
				// }],
				lenChecked: 0,
				arr: [],
			}
		},
		onShow() {
			const app = getApp()
			console.log(app.globalData.customBarH);
			this.statusBarH = app.globalData.statusBarH //状态栏高度
			this.windowHeight = app.globalData.phoneInformation.windowHeight //屏幕高度
		},
		methods: {
			hightLight(val, editKeyword,color,Fsize) {},
			// 改变关键词方法
			setColor(item) {
				if (this.keyWord.indexOf(item) != -1) {
					return 'color:#2878FF'
				} else {
					return 'color:#000000'
				}
			},
			// 获取搜索数据
			changeSearch(e) {
				if (e) {
					if (e.indexOf(' ') != -1) {
						this.keyWord = e.split(/[\t\r\f\n\s]*/g).join('')
					} else {
						this.$http.huirc.corpBlockSearch(this.keyWord).then(res => {
							if (res.Success) {
								if (res.Result.length > 0) {
									this.checkDataList = res.Result.map(item => {
										return {
											...item,
											checked: item.Disable
										}
									})
								} else {
									this.checkDataList = []
								}
							}
						})
						this.hightLight()
					}

				} else {
					this.checkDataList = []
					this.keyWord = ''
				}
			},
			// 取消
			quxiao() {
				uni.navigateBack();
			},
			// 点击叉叉
			clearsearch() {
				this.checkDataList = []
			},
			// 点击事件  每一项数据
			checkboxChange(item, index) {
				if (item.Disable == false) {
					this.checkDataList[index].checked = !item.checked
				}

				// 	console.log(this.checkDataList);
			},
			// 屏蔽所选企业
			piingbi() {
				this.checkDataList.forEach((item, index) => {
					if (item.Disable == false && item.checked == true) {
						let obj = {}
						obj.CorpId = item.CorpId,
							obj.CorpName = item.CorpName
						this.checkedAll.push(obj)

					}
				})
				this.$http.huirc.corpBlock(this.checkedAll).then(res => {
					if (res.Success) {
						this.$util.toast('屏蔽成功')
						setTimeout(() => {
							uni.navigateBack()
						}, 3000)
					} else {
						this.$util.toast('屏蔽失败')
					}
				})
			},
			// 点击全选
			checkBoxMD() {
				if (this.checkTag) {
					this.checkDataList = this.checkDataList.map(item => {
						item.checked = true
						return item
					})
				} else {

					this.checkDataList = this.checkDataList.map(item => {
						item.checked = item.Disable ? item.Disable : false
						return item
					})
				}
				// console.log(this.checkDataList);
			}

		},
		// 计算属性
		computed: {
			checkBoxmd() {
				let k = this.checkDataList.findIndex(item => {
					return item.checked == false
				})
				console.log(k);
				this.checkTag = k > -1 ? true : false
				return this.checkTag
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	/deep/ .uni-checkbox-input {
		width: 31rpx;
		height: 31rpx;
	}

	.box {

		.search-box {
			position: fixed;
			top: 0;
			width: 100%;
			padding: var(--status-bar-height) 40rpx 0 40rpx;
			height: calc(88rpx + var(--status-bar-height));
			display: flex;
			//justify-content: space-between;  
			align-items: center;
			box-sizing: border-box;
			z-index: 999;
			background-color: #fff;
		}

		.content-box {
			margin-top: calc(88rpx + var(--status-bar-height));
			padding: 36rpx 40rpx;

			.content {
				display: flex;
				padding-bottom: 10rpx 0 33rpx;

				.check {
					.checklabelbox {
						padding-bottom: 33rpx;

						.checklabel {
							display: flex;



							.textbox {
								.name {
									display: flex;
									// align-items: center;
									justify-content: center;
									padding: 5rpx 0;
									height: 42rpx;

									view {
										font-size: 30rpx;
										font-weight: 400;
										color: #000000;
									}


								}

								:last-child {
									font-size: 26rpx;
									font-weight: 400;
									color: #000000;
									padding: 0rpx 0 33rpx;
								}
							}
						}
					}
				}

				.Corp {
					font-size: 28rpx;
					font-weight: 400;
					color: #313131;
				}
			}
		}

		.fiexd {
			position: fixed;
			bottom: 0;
			width: 100%;
			background-color: #fff;
			// box-shadow: 0px 0px 5px 1px rgba(131, 140, 149, 0.14);
			z-index: 99999;

			.grid-text {
				font-size: 28rpx;
				line-height: 98rpx;
			}

			.fiexd-cont {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 60rpx 60rpx;

				.quanxuan {
					display: flex;
					align-items: center;

					.tubiao {
						width: 34rpx;
						height: 34rpx;
						background: #FFFFFF;
						border-radius: 8rpx;
						opacity: 1;
						border: 1rpx solid #D0D0D0;
						margin-right: 15rpx;
						display: flex;
						align-items: center;
						justify-content: center;

					}

					.tubiao1 {
						width: 34rpx;
						height: 34rpx;
						background: #FFFFFF;
						border-radius: 8rpx;
						opacity: 1;
						border: 1rpx solid #007aff;
						margin-right: 15rpx;
						display: flex;
						align-items: center;
						justify-content: center;

					}
				}

				.btnbox2 {
					padding: 16rpx 50rpx;
					background: #3476FE;
					border-radius: 10rpx;
					opacity: 1;
					display: flex;
					align-items: center;
					justify-content: center;

					.btntext {
						font-size: 26rpx;
						font-weight: 400;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>